<script setup>
import Demo from "./components/Demo.vue";
import Setting from "./components/Setting.vue";
import {useStore} from "./store/store.js";
import {computed} from "vue";
const store = useStore()
const nowGroup = computed(() => store.nowGroup)
const nowPrize = computed(() => store.nowPrize)
</script>

<template>
  <div class="lottery-main">
    <img class="bg-img" src="./assets/bg.jpg" alt="">
    <div class="title">幸运大抽奖</div>
    <div class="now-group">现在抽奖：{{nowGroup}}</div>
    <div class="now-prize" v-if="nowPrize !== '名额'">奖品：{{nowPrize}}</div>
    <Demo />
  </div>
  <div class="setting-btn">
    <Setting/>
  </div>
</template>

<style scoped>
.lottery-main {
  position: relative;
  width: 100vw;
  height: 100vh;
  .bg-img {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  .title {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 60px;
    color: #e9ad6f;
  }
  .now-group {
    position: absolute;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    color: #e9ad6f;
  }
  .now-prize {
    position: absolute;
    top: 160px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    color: #e9ad6f;
  }
}

.setting-btn {
  position: absolute;
  bottom: 30px;
  right: 30px;
}
</style>
